<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('Magic_Coffee咖啡店-个人中心','user-center')">
</head>
<body>
<header th:replace="mall/header::header-fragment"></header>
<nav th:replace="mall/header::header-search-fragment"></nav>
<div class="crumb">
    <div class="w">
        <div class="crumb-con">
            <a href="./index.html" class="link">Mall</a>
            <span>></span>
            <span class="link-text">更新个人中心</span>
        </div>
    </div>
</div>
<div class="page-wrap w">
    <!--左边导航栏-->
    <div th:replace="mall/nav-side::nav-side-fragment"></div>
    <div class="content with-nav">
        <div class="panel" >
            <div class="panel-title">更新个人信息</div>
            <div class="panel-body">
                <div class="user-info">
                    <div class="form-line">
                        <span class="label">用户名：</span>
                        <span class="input" th:text="${session.MallUser.username}"></span>
                    </div>
                    <div class="form-line">
                        <span class="label">电话：</span>
                        <input class="input" id="phone" th:value="${session.MallUser.phone}"></input>
                    </div>
                    <div class="form-line">
                        <span class="label">邮箱：</span>
                        <input class="input" id="email" th:value="${session.MallUser.email}"></input>
                    </div>
                    <div class="form-line">
                        <span class="label">问题：</span>
                        <input class="input" id="question" th:value="${session.MallUser.question}"></input>
                    </div>
                    <div class="form-line">
                        <span class="label">答案：</span>
                        <input class="input" id="answer" th:value="${session.MallUser.answer}"></input>
                    </div>
                    <button type="submit" class="btn btn-submit">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="mall/general-footer::general-footer-fragment"></div>
</body>
<!-- jQuery -->
<!--<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>-->
<script th:src="@{/admin/plugins/jquery/jquery-3.5.1.min.js}"></script>
<script th:src="@{/admin/dist/js/public.js}"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script type="text/javascript">
    $(function () {
        $('#user-center').addClass('active');
    });
    $(document).on('click','.btn-submit',function () {
        var phone = $.trim($('#phone').val());
        if (!validPhoneNumber(phone)) {
            swal('请输入11位的手机号', {
                icon: "error",
            });
            return false;
        }
        var email = $.trim($('#email').val());
        if (!validEmail(email)) {
            swal('请输入正确的邮箱格式', {
                icon: "error",
            });
            return false;
        }
        var question = $.trim($('#question').val());
        if (!isNotNull(question)) {
            swal('请输入正确的问题', {
                icon: "error",
            });
            return false;
        }
        var answer = $.trim($('#answer').val());
        if (!isNotNull(answer)) {
            swal('请输入正确的答案', {
                icon: "error",
            });
            return false;
        }
        var userInfo = {
            phone : phone,
            email : email,
            question : question,
            answer : answer
        };

        $.ajax({
            type : 'POST',
            url :'/user-center-update',
            contentType : 'application/json',
            data : JSON.stringify(userInfo),
            success : function (result) {
                if (result.resultCode == 200){
                    alert("个人信息修改成功");
                    window.location.href = './user-center.html';
                }else{
                    alert(result.message);
                }

            },
            error : function (result) {
                alert(result.message);
            }
        });
    });
</script>
</html>